// 滚屏函数
onscroll = lazyLoad
// onload是等所有的资源文件加载完毕以后再绑定事件
window.onload = lazyLoad

//监听页面滚动事件
function lazyLoad() {
  // 可视区域高度
  let clientHeight = document.documentElement.clientHeight
  //滚动区域高度
  let scollTop = document.documentElement.scrollTop
  console.log(clientHeight, scollTop)
  // 获取图片列表
  let lazy = document.getElementsByClassName('lazy')
  for (let i = 0; i < lazy.length; i++) {
    let top = getPoint(lazy[i])
    console.log(top)
    if (scollTop + clientHeight > top + 200) {
      lazy[i].src = lazy[i].getAttribute('imgSrc') // 获取自定义属性imgSrc，用真图片替换假图片
      lazy[i].removeAttribute('imgSrc')
      lazy[i].className = ''
    }
  }
}

//获取元素顶端到视口顶端的距离
let getPoint = (obj) => {
  let t = obj.offsetTop //距离页面顶端的距离
  while ((obj = obj.offsetParent)) {
    t += obj.offsetTop
  }
  return t
}












//jQuery方法
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
// 图片懒加载
        //打开页面 调用一次 
        start()

        $(window).on('scroll', function () {
            start() //滚动页面时 调用一次
        })

        //加载函数 
        function start() {
            $('.img img').not('[data-isLoaded]').each(function () {
                var $node = $(this)
                if (isShow($node)) {
                    //设置一个定时器起到缓冲效果 
                    setTimeout(function () {
                        loadIng($node)
                    }, 1000)

                }
            })
        }
        // 页面逻辑
        function isShow($node) {
            // 当一个元素出现在我们眼前（小于窗口高度）上窗口滚动的高度的时候就意味着到达目标点 
            // 可以开始加载图片或者其他内容
            return $node.offset().top <= $(window).height() + $(window).scrollTop()
        }
        // 显示状态
        function loadIng($img) {
            // 获取目标元素 并替换 
            $img.attr('src', $img.attr('data-src'))
            //性能优化 进行判断 已经加载的不会再进行加载  
            $img.attr('data-isLoaded', 1)
        }